<template>
<div class="content">
    <Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="70">
        <FormItem prop="username" label="用户名">
            <Input v-model="formInline.username" placeholder="Username" disabled>
            <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="oldPassword" label="密码">
            <Input type="password" v-model="formInline.oldPassword" placeholder="Password">
            <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="password" label="新密码">
            <Input type="password" v-model="formInline.password" placeholder="Password">
            <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="qpwd" label="确认密码">
            <Input type="password" v-model="formInline.qpwd" placeholder="Password">
            <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')">确定</Button>
        </FormItem>
    </Form>
    </div>
</template>
<script>
export default {
  data() {
    return {
      formInline: {
        username: "",
        password: "",
        oldPassword: "",
        qpwd: ""
      },
      ruleInline: {
        username: [
          { required: true, message: "请输入你的用户名", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入你的新密码", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "密码不能低于6位",
            trigger: "blur"
          }
        ],
        oldPassword: [
          { required: true, message: "请输入你的老密码", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "新密码不能低于6位",
            trigger: "blur"
          }
        ],
        qpwd: [
          { required: true, message: "请再次输入你的新密码", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "新密码不能低于6位",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted(){
    this.formInline.username = localStorage.getItem("username");
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.formInline.password != this.formInline.qpwd) {
            this.$Message.warning("新密码和确认密码不一致，请重新输入");
            return;
          }
          this.$http
            .post("/api/auth/sysuser/doModPass", this.formInline)
            .then(res => {
              console.log(res);
              if (res.retHead.code == "0000000") {
                this.$Message.success({
                  top: 100,
                  duration: 1,
                  content: res.retHead.message
                });
                this.formInline.username = "";
                this.formInline.password = "";
                this.formInline.oldPassword = "";
                this.formInline.qpwd = "";
              } else {
                this.$Message.warning({
                  top: 100,
                  duration: 1,
                  content: res.retHead.message
                });
              }
            });
        } else {
          this.$Message.error("Fail!");
        }
      });
    }
  }
};
</script>